<template>
	<div class="Vending">
		<div class="Vending_cont">
			<p class="ven_title">
				<span>自动售票流程</span>
				<i></i>
			</p>
			<div class="tab">
				<div class="tab_left">
					<ul>
						<li 
						 v-for="(item,index) in tab_nve"
						 :class="{'active':item.active}"
						 @click="togger(index,item)"
						  >
							<i><img :src="item.IMG"></i>
							<span>{{item.name}}</span>
						</li>
						<!-- <li>
							<i><img src="../../assets/fiveuse/fivepage1 (2).png"></i>
							<span>选择业务类型</span>
						</li>
						<li>
							<i><img src="../../assets/fiveuse/fivepage1 (3).png"></i>
							<span>选择数量</span>
						</li>
						<li>
							<i><img src="../../assets/fiveuse/fivepage1 (4).png"></i>
							<span>微信支付</span>
						</li>
						<li>
							<i><img src="../../assets/fiveuse/fivepage1 (5).png"></i>
							<span>取票</span>
						</li>
						<li>
							<i><img src="../../assets/fiveuse/fivepage1 (6).png"></i>
							<span>入园</span>
						</li> -->
					</ul>
				</div>

				<div class="tab_right">
					<ul 
					v-for="(item,index) in tab_center"
					:class="[(item.className),{'active':index==IsShow}]"
					 >
						<img :src="item.IMG">
					</ul>
					<!-- <ul>
						2
					</ul>
					<ul>
						3
					</ul>
					<ul>
						4
					</ul>
					<ul>
						5
					</ul>
					<ul>
						6
					</ul>  -->
				</div>


			</div>
		</div>
	</div>	
</template>

<script>
	export default{
		name:'Vending',
		data(){
			return{
				tab_nve:[
					{
						active:true,
						IMG:require('../../assets/fiveuse/fivepage1 (1).png'),
						name:'手机扫码'
					},
					{
						active:false,
						IMG:require('../../assets/fiveuse/fivepage1 (2).png'),
						name:'选择业务类型'
					},
					{
						active:false,
						IMG:require('../../assets/fiveuse/fivepage1 (3).png'),
						name:'选择数量'
					},
					{
						active:false,
						IMG:require('../../assets/fiveuse/fivepage1 (4).png'),
						name:'微信支付'
					},
					{
						active:false,
						IMG:require('../../assets/fiveuse/fivepage1 (5).png'),
						name:'取票'
					},
					{
						active:false,
						IMG:require('../../assets/fiveuse/fivepage1 (6).png'),
						name:'入园'
					}
				],
				tab_center:[
					{
						className:'ulList1',
						IMG:require('../../assets/fiveuse/tab_one1.png')
					},
					{
						className:'ulList2',
						IMG:require('../../assets/fiveuse/tab_one2.png')
					},
					{
						className:'ulList3',
						IMG:require('../../assets/fiveuse/tab_one3.png')
					},
					{
						className:'ulList4',
						IMG:require('../../assets/fiveuse/tab_one4.png')
					},
					{
						className:'ulList5',
						IMG:require('../../assets/fiveuse/tab_one5.png')
					},
					{
						className:'ulList6',
						IMG:require('../../assets/fiveuse/tab_one6.png')
					}

				],
				IsShow:0


			}
		},
		methods:{
			togger:function(index,item){
				 this.tab_nve.forEach(function(val){
				 	val.active=false;
				 })
				item.active=!item.active;
				this.IsShow=index;
				
			}
		}
	}

</script>

<style scoped>
@media only screen and (min-width: 1000px){
	.Vending{
		width: 100%;
		height: 710px;
		background: url('../../assets/fiveuse/Vendingbeijing.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}
	.Vending_cont{
		width: 1000px;
		margin: 0 auto;
	}
	.Vending_cont .ven_title{
		color: #fff;
		text-align: center;
		width: 100%;
		margin-top:40px;
		float: left;
	}
	.Vending_cont .ven_title span{
		font-size:26px; 
		display: block;
	}
	.Vending_cont .ven_title i{
		display: inline-block;
		width: 50px;
		height: 2px;
		background-color: #fff;
	}
	.tab{
		width: 100%;
		float: left;
	}
	.tab .tab_left{
		float: left;
		width: 183px;
	}
	.tab .tab_right{
		width:817px;
		float: left;
	}
	.tab .tab_left ul{
		border-right:1px solid #a0a1ad; 
	}
	.tab .tab_left ul li{
		width: 168px;
		height: 63px;
		padding-left:15px;
		color: #fff;
		font-size: 16px;
		line-height: 63px;
		font-weight: 600;
		margin-bottom: 20px;
		cursor: pointer;
	}
	.tab .tab_left ul li.active{
		background-color: #00ade6;
		transition: all .5s;
	}
	
	.tab .tab_left ul li span{
		margin-left: 12px;
	}
	.tab .tab_right ul{
       display: none;
	}
     .tab .tab_right ul.active{
		display:block;
     }
	.tab .tab_right .ulList1 img{
		margin-top:122px;
		margin-left:110px;
	}
	.tab .tab_right .ulList2 img{
		margin-top:90px;
		margin-left:110px;
	}
	.tab .tab_right .ulList3 img{
		margin-top:133px;
		margin-left:110px;
	}
	.tab .tab_right .ulList4 img{
		margin-top:122px;
		margin-left:70px;
	}
	.tab .tab_right .ulList5 img{
		margin-top:66px;
		margin-left:110px;
	}
	.tab .tab_right .ulList6 img{
		margin-top:100px;
		margin-left:110px;
	}
}



</style>